import { Typography } from '@mui/material'
import { styled } from '@mui/material/styles'
import { TCardProps } from './card'
import { Link } from 'react-router-dom'
import DislikeIcon from '@mui/icons-material/FavoriteBorder'
import LikeIcon from '@mui/icons-material/Favorite'
import { useEffect, useState } from 'react'

import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
import {
	selectAllProducts,
	selectCatalog,
	selectUser,
} from '../../store/reducers/selectors'
import { useAppDispatch, useAppSelector } from '../../store/hooks'
import {
	fetchSetDislike,
	fetchSetLike,
} from '../../store/reducers/slices/productSlice'
import { fetchAllProducts } from '../../store/reducers/slices/allProductsSlice'

export enum ImageType {
	cardList = 'cardList',
	productCard = 'productCard',
	favorites = 'favorites',
}

type ImageProps = Pick<TCardProps, '_id' | 'pictures' | 'discount'> & {
	type: ImageType
}

const StyledContainer = styled('div', {
	shouldForwardProp: (props) => props !== 'type',
})(({ type }: Pick<ImageProps, 'type'>) => ({
	display: 'inline-flex',
	justifyContent: 'center',
	position: 'relative',
	width:
		type === ImageType.cardList || type === ImageType.favorites
			? '236px'
			: '488px',
	height:
		type === ImageType.cardList || type === ImageType.favorites
			? '187px'
			: '488px',
	overflow: 'hidden',
}))

const StyledBadge = styled('div')(() => ({
	display: 'flex',
	justifyContent: 'center',
	minWidth: '40px',
	width: 'fit-content',
	height: '24px',
	padding: '2px, 8px, 2px, 8px',
	borderRadius: '20px',
	background: 'red',
	position: 'absolute',
	top: '10px',
	left: '0',
	right: '0',
	bottom: '0',
	zIndex: '1',
	cursor: 'default',
}))

const StyledIconButton = styled('div')(() => ({
	cursor: 'pointer',
	position: 'absolute',
	height: '46px',
	top: '0',
	left: '190px',
	right: '0',
	bottom: '0',
	zIndex: '1',
	'& > svg': {
		fill: '#7B8E98',
	},
}))

export const StyledDislikeIcon = styled(DislikeIcon)(() => ({
	color: '#7B8E98',
}))
export const StyledLikeIcon = styled(LikeIcon)(() => ({
	color: '#7B8E98',
}))
const StyledDTrashIcon = styled(DeleteOutlineIcon)(() => ({
	color: '#7B8E98',
}))

const Image = ({ _id, type, discount, pictures = '' }: ImageProps) => {
	const user = useAppSelector(selectUser)
	const dispatch = useAppDispatch()

	const allProducts = useAppSelector(selectAllProducts)
	const catalogData = useAppSelector(selectCatalog)

	const [like, setLike] = useState(false)

	// Данный код необходимо отрефакторить: убрать лишний вызов fetchAllProducts, заменив на тегирование в RTK query
	function handleClick() {
		if (_id) {
			if (like) {
				dispatch(fetchSetDislike({ id: _id })).then(() => {
					dispatch(fetchAllProducts())
				})
			} else {
				dispatch(fetchSetLike({ id: _id })).then(() => {
					dispatch(fetchAllProducts())
				})
			}
		}
	}

	useEffect(() => {
		const product = allProducts?.find((product) => product._id === _id)
		if (product && user) setLike(product.likes.includes(user?._id) || false)
	}, [user, catalogData, _id, allProducts])

	return (
		<StyledContainer type={type}>
			{discount !== 0 && (
				<StyledBadge>
					<Typography color={'white'}>{`${discount}%`}</Typography>
				</StyledBadge>
			)}
			<Link to={`/product/${_id}`}>
				{type === ImageType.cardList ? (
					<img width='236px' height='187px' src={pictures} alt='Product' />
				) : type === ImageType.productCard ? (
					<img width='488px' height='488px' src={pictures} alt='Product' />
				) : type === ImageType.favorites ? (
					<img width='236px' height='187px' src={pictures} alt='Product' />
				) : (
					<></>
				)}
			</Link>
			{type === ImageType.cardList && (
				<StyledIconButton>
					{like ? <StyledLikeIcon /> : <StyledDislikeIcon />}
				</StyledIconButton>
			)}
			{type === ImageType.favorites && (
				<StyledIconButton onClick={() => handleClick()}>
					{like ? <StyledDTrashIcon /> : <StyledDislikeIcon />}
				</StyledIconButton>
			)}
		</StyledContainer>
	)
}

export default Image
